$(document).ready(function(){
	startScript();
	startMenu();
	startAccueil();

  	$("button").on("click", function(){
		if($(this).attr("id") == "lnkAccueil") {
			startAccueil ();
			updatePanel('accueil');
		} else if ($(this).attr("id") == "lnkRecherche") {
			startRecherche ();
			updatePanel('rechercher');
		} else if ($(this).attr("id") == "lnkProfil") {
			startProfil ();
			updatePanel('profil');
		} else if ($(this).attr("id") == "lnkReward") {
			startRewardShop ();
			updatePanel('reward');
		}
	});
});

function startScript(){
	sessionStorage.clear();
	sessionStorage.setItem("expedition",JSON.stringify(
		{
			0:{"name":'Le temple méconnu', "state":-1,"nbSouvenirs":2,"description":'Le vieux lille regorge de lieux originaux ! Les francs maçons sont passés au coin de la rue Thiers et Esquermoise !',"nbValidate":4,"latitude":48.85837,"longitude":2.2945,"validation":'nfc',"tagNfc":'18246500',"funFact":"Il s’agit de l’un des temples Franc-Maçonnique de la ville (le plus connu vraisemblablement). Ne vous fiez pas donc pas à son couloir ouvert sur l’extérieur (du jamais vu dans le Nord) et sa fenêtre proéminente qui donnent presque l’impression que le bâtiment est accessible. Depuis 20 années que j’arpente le pavé lillois je n’ai jamais vu les rideaux de cet édifice ouvert, ni quelqu’un passer dans ce couloir. C’est bien connu, les Franc-Maçons cultivent la discrétion, alors il ne vous reste plus qu’a fantasmer sur ce qui se passe derrière ces murs."}, 
			1:{"name":'42', "state":1,"nbSouvenirs":2,"description":'La question de la vie?',"nbValidate":4,"latitude":48.85837,"longitude":2.2945,"validation":'gps',"tagNfc":null,"funFact":'Baleiiiine'},
			2:{"name":'Maison Gratte Ciel', "state":0,"nbSouvenirs":2,"description":'Combien a-t-elle d\'étages?',"nbValidate":4,"latitude":48.85837,"longitude":2.2945,"validation":'nfc',"tagNfc":'32fb6400',"funFact":'Cotelettes'},
			3:{"name":'Des cadavres sous le tapis', "state":-1,"nbSouvenirs":2,"description":'Une Grande Dame possède-t-elle des cadavres dans son placard?',"nbValidate":4,"latitude":48.85837,"longitude":2.2945,"validation":'nfc',"tagNfc":'46405ff1',"funFact":"En 52 avant J.-C., une terrible bataille voit s'affronter les Romains attaquent les Parisii sur la plaine Garanella, rebaptisée 'Champ de Mars' par les romains victorieux. La tour Eiffel veille depuis sur les dépouilles du chef gaulois Camulagène et de ses hommes."}
		}
	));
	sessionStorage.setItem("user",JSON.stringify({"nom":'Hochon', "prenom":"Paul", "nbSouvenirs":42,"nbExpedition":'5',"ville":'Tourcoing'}));
	sessionStorage.setItem("rewards",JSON.stringify(
		{
			0:{"name":'1 mois de forfait Orange offert', "nbSouvenirs":300, "acquis":"oui", "desc": "Code Promo : EpicJourneyHochon"}, 
			1:{"name":'50 euros de réduction chez OVH', "nbSouvenirs":500, "acquis":"non", "desc": "Code Promo : EpicOVHPaul"}
		}
	));
}

function startMenu(){
	$('.souvenirs span').html(JSON.parse(sessionStorage.getItem('user')).nbSouvenirs);
	var user = JSON.parse(sessionStorage.getItem('user'));
	$('.pseudo').html(user.prenom+' '+user.nom);
}

function showFact(fact, title, subtitle){
	if (title) {
		$("#funFactPop h2").html(title);
	}
	if (subtitle) {
		$("#funFactPop h4").html(subtitle);
	}
	$("#funFactPop p").html(fact);
	$("#funFactPop").popup("open");
}

function startAccueil (){
	$("#Accueil").show ();
	$("#Recherche").hide ();
	$("#Profil").hide ();
	$(".expes").html ("");
	$(".title").html ("Accueil");
	$("#RewardShop").hide();

	var expes = JSON.parse(sessionStorage.getItem("expedition"));
	for(i in expes){
		monobjet = expes[i];		
		if (monobjet['state']==0) {
			var collapsible = $('<div class="collapsible" data-role="collapsible" data-collapsed-icon="false" data-expanded-icon="false">');
			var collapsibleVisible = $('<h3>'+monobjet["name"]+'<a href="#" class="flag" id="expe_'+i+'"><i class="fa fa-star fa-lg"></i></a></h3>');
			var slider = monobjet["nbSouvenirs"]+' <i class="bleu fa fa-cloud fa-lg"></i><br/> Validée par '+monobjet["nbValidate"]+' autres voyageurs<br/><br/>'+monobjet["description"];
			slider += '</br><a href="#" class="button_envoyer" data-role="button" data-mini="true" id="expe_'+i+'" data-icon="check" data-inline="true">J\'y suis !</a>';
			$(collapsible).append(collapsibleVisible);
			$(collapsible).append(slider);
			$("#current").find("ul").append($(collapsible).collapsible()).trigger("create");
			$(collapsible).wrap ("<li class='swipe'></li>");
		}
		else if (monobjet['state']==-1) {
		
			var collapsible = $('<div class="collapsible" data-role="collapsible" data-collapsed-icon="false" data-expanded-icon="false">');
			var collapsibleVisible = $('<h3>'+monobjet["name"]+'<a href="#" class="flag" id="expe_'+i+'"><i class="fa fa-star-o fa-lg"></i></a></h3>');
			var slider = monobjet["nbSouvenirs"]+' <i class="bleu fa fa-cloud fa-lg"></i><br/> validée par '+monobjet["nbValidate"]+' autres voyageurs<br/><br/>'+monobjet["description"]+'</br> <i class="fa fa-location-arrow"></i> ('+monobjet["latitude"]+' - '+monobjet["longitude"]+')';
			slider += '</br><a href="#" class="button_envoyer" data-role="button" data-mini="true" id="expe_'+i+'" data-icon="check" data-inline="true">J\'y suis !</a>';
			slider += '<a href="#map" data-rel="popup" data-role="button" data-inline="true" data-iconpos="notext" data-position-to="window"><i class="fa fa-map-marker"></i></a><div data-role="popup" id="map"><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><div id="map-canvas'+i+'" class="map-canvas"></div></div>';
			$(collapsible).append(collapsibleVisible);
			$(collapsible).append(slider);
			$("#search").find("ul").append($(collapsible).collapsible()).trigger("create");
			$(collapsible).wrap ("<li class='swipe'></li>");
			//$("[data-role=content]").append($(collapsible).collapsible()).trigger("create");
			initializeMap(monobjet["latitude"],monobjet["longitude"],i)
		}

	}


	$(".collapsible .ui-collapsible-heading-toggle").on("click", function (e) { 
	    var current = $(this).closest(".ui-collapsible");             
	    if (current.hasClass("ui-collapsible-collapsed")) {
	        //collapse all others and then expand this one
	        $(".ui-collapsible").not(".ui-collapsible-collapsed").find(".ui-collapsible-heading-toggle").click();
	        $(".ui-collapsible-content", current).slideDown(300);
	    } else {
	        $(".ui-collapsible-content", current).slideUp(300);
	    }
	});

	$.event.special.swipe.horizontalDistanceThreshold =100;
	$("li").on("swipe",function(event){
		$(this).animate(
            {"left": "-=1000px"},
            "slow",
            "swing",
            function (){$(this).remove ();});
	});
	
	$(".flag").on("click", function (){
		var id = $(this).attr("id").split("_")[1];
		var expeditions  = JSON.parse(sessionStorage.getItem("expedition"));
		if (expeditions[id].state ==0)
			{expeditions[id].state = -1;}
		else {
			expeditions[id].state=0;
		}
		sessionStorage.setItem("expedition", JSON.stringify(expeditions));
		startAccueil ();
	});

	updateButtonEnvoyerCoderDegeulasse();
}

function startRecherche (){
	$("#Accueil").hide ();
	$("#Recherche").show ();
	$("#Profil").hide ();
	$(".title").html ("Recherche");
	$(".listExpe").html ("");
	$("#RewardShop").hide();
	var expes = JSON.parse(sessionStorage.getItem("expedition"));
	for(i in expes){
		monobjet = expes[i];	
			
		if (monobjet['state']==-1) {
			
				var collapsible = $('<div data-role="collapsible" data-collapsed-icon="false" data-expanded-icon="false"><h3>'+monobjet["name"]+'</h3></div>');
				var slider = 'Souvenirs à gagner: '+monobjet["nbSouvenirs"]+'</br> Nombre de validation:'+monobjet["nbValidate"]+'</br>Description:'+monobjet["description"]+'</br> Lieux: ('+monobjet["latitude"]+';'+monobjet["longitude"]+')';
				slider += '</br><a href="#" data-role="button" class="flag" id="expe_'+i+'" data-mini="true" data-iconpos="notext" data-icon="lock" data-inline="true">flag</a><a href="#" class="button_envoyer" id="expe_'+i+'" data-role="button" data-mini="true" data-icon="check" data-inline="true">Envoyer</a>';
				slider += '<a href="#map" data-rel="popup" data-role="button" data-inline="true" data-icon="info" data-iconpos="notext" data-position-to="window" >Show Popup</a><div data-role="popup" id="map"><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><div id="map-canvas'+i+'" class="map-canvas"></div></div>';
				$(collapsible).append(slider);
				$("#searchAll").append($(collapsible).collapsible()).trigger("create");
				//$("[data-role=content]").append($(collapsible).collapsible()).trigger("create");
				initializeMap(monobjet["latitude"],monobjet["longitude"], i);
		}
		
		$(".flag").on("click", function (){
			var id = $(this).attr("id").split("_")[1];
			var expeditions  = JSON.parse(sessionStorage.getItem("expedition"));
			if (expeditions[id].state ==0)
				{expeditions[id].state = -1;}
			else {
				expeditions[id].state=0;
			}
			sessionStorage.setItem("expedition", JSON.stringify(expeditions));
			startRecherche ();
		});
	}

	updateButtonEnvoyerCoderDegeulasse();
}

function startProfil (){
	$("#Accueil").hide ();
	$("#Recherche").hide ();
	$("#Profil").show ();
	$(".title").html ("Profil");
	$("#history").html("");
	$("#reward").html("");
	$("#RewardShop").hide();

	var expes = JSON.parse(sessionStorage.getItem("expedition"));
	for(i in expes){
		monobjet = expes[i];		
		if (monobjet['state']==1){
			var collapsible = $('<div data-role="collapsible" data-collapsed-icon="false" data-expanded-icon="false"><h3>'+monobjet["name"]+'</h3></div>');
			var slider = 'Description:'+monobjet["description"]+'</br> Fun fact: '+monobjet["funFact"];
			$(collapsible).append(slider);
			$("#history").append($(collapsible).collapsible()).trigger("create");
		}
	}
	
	var rewards = JSON.parse(sessionStorage.getItem("rewards"));
	for(i in rewards){
		monobjet = rewards[i];
		if(monobjet['acquis'] == "oui"){
			var collapsible = $('<div data-role="collapsible" data-collapsed-icon="false" data-expanded-icon="false"><h3>'+monobjet["name"]+' // valeur : '+ monobjet["nbSouvenirs"] +' souvenirs</h3></div>');
			var slider = monobjet["desc"];
			$(collapsible).append(slider);
			$("#reward").append($(collapsible).collapsible()).trigger("create");
		}
	}
	updateButtonEnvoyerCoderDegeulasse();
}

function updatePanel(page) {

	$('#menu').find('li').removeClass('selection');

	switch (page) {
		case 'accueil' :
		$($('#menu').find('li')[0]).addClass('selection');
		break;

		case 'rechercher' :
		$($('#menu').find('li')[1]).addClass('selection');
		break;

		case 'profil' :
		$($('#menu').find('li')[2]).addClass('selection');
		break;

		case 'reward' :
		$($('#menu').find('li')[3]).addClass('selection');
		break;
	}
	
	$('#menu').panel('close');
}

function updateButtonEnvoyerCoderDegeulasse() {
	$('.button_envoyer').on('click', function() {
		var id = $(this).attr("id").split("_")[1];
		validateExpedition(id);
	});
}


function getExpeditionIdFromNfcId(nfcId) {
	var expeditions	= JSON.parse(sessionStorage.getItem("expedition"));
	
	for ( i in expeditions ) {
		if ( expeditions[i].validation == 'nfc' && expeditions[i].tagNfc == nfcId ) {
			return i;
		}
	}

	return null;
}


function validateExpedition(id) {
	var expeditions	= JSON.parse(sessionStorage.getItem("expedition"));
	var users 		= JSON.parse(sessionStorage.getItem("user"));
	
	if (!expeditions || !expeditions[id]) {
		alert('Expedition '+id+' not found');
		return;
	}

	if (expeditions[id].state == 1) {
		showFact('L\'expédition "'+expeditions[id]['name']+'" a déjà été validée', "Pauvre fou !");
		return;
	}

	$('#image_validation_fondue').show();
	$('#image_validation').addClass('zoom');
	$('#image_validation').show();

	setTimeout(function() {
		$('#image_validation_fondue').hide();
		$('#image_validation').removeClass('zoom');
		$('#image_validation').hide();

		
		expeditions[id].state = 1;
		users.nbSouvenirs += expeditions[id].nbSouvenirs;
		
		sessionStorage.setItem("expedition", JSON.stringify(expeditions));
		sessionStorage.setItem("user", JSON.stringify(users));

		showFact(expeditions[id].funFact, 'Le saviez-vous ?', expeditions[id]['name']);
		startAccueil();
	}, 2500);
}


function startRewardShop (){
	$("#Accueil").hide ();
	$("#Recherche").hide ();
	$("#Profil").hide ();
	$(".available").html ("");
	$(".title").html ("Magasin de récompenses");
	$("#RewardShop").show();

	var rewards = JSON.parse(sessionStorage.getItem("rewards"));
	for(i in rewards){
		monobjet = rewards[i];
		if(monobjet['acquis'] == "non"){
			var collapsible = $('<div data-role="collapsible" data-collapsed-icon="false" data-expanded-icon="false"><h3>'+monobjet["name"]+' // valeur : '+ monobjet["nbSouvenirs"] +' souvenirs</h3></div>');
			var slider = monobjet["desc"];
			$(collapsible).append(slider);
			$("#available").append($(collapsible).collapsible()).trigger("create");
		}
	}

}
